<template>
    <div class="subscribe">
        <div class="search_box_top">
            <a-tabs v-model:activeKey="activeKey">
                <a-tab-pane :key="item.id" v-for="item  in activeLiss">
                    <template #tab>
                        <span @click="activeClick(item)">
                            {{ item.name }}
                            <span v-if="item.name == '品牌'" class="Beta">Beta</span>
                        </span>
                    </template>
                </a-tab-pane>
            </a-tabs>
            <div class="subsk_top">
                <div class="subsk_wds" v-for="item in ghz" :key="item.id" :class="{ actibes: gjz == item.id }" @click="gjzClick(item)">{{ item.name }}
                </div>
            </div>

            <!-- 全部标讯 -->
            <TenderContent v-if="activeKey == '1'" />
            <!-- 供应商 -->
            <VendorData v-if="activeKey == '2'" />
            <!-- 采购商 -->
            <Purcdata v-if="activeKey == '3'" />
            <!-- 品牌 -->
            <Brandingdata v-if="activeKey == '4'" />
            <!-- 招标预测 -->
            <Projdata v-if="activeKey == '5'" />
            <!-- 拟建项目 -->
            <Proposedata v-if="activeKey == '6'" />
            <!-- 招标代理机构 -->
            <Biddingdata v-if="activeKey == '7'" />
            <!-- 公司 -->
            <Opedata v-if="activeKey == '8'" />
        </div>

    </div>
</template>

<script setup>
import { ref } from 'vue'
import TenderContent from '../../../../search/computer/tenderContent/index.vue';
import VendorData from '../../../../search/computer/vendorData/index.vue';
import Purcdata from '../../../../search/computer/purcdata/index.vue';
import Brandingdata from '../../../../search/computer/brandingdata/index.vue';
import Projdata from '../../../../search/computer/projdata/index.vue';
import Proposedata from '../../../../search/computer/proposedata/index.vue';
import Biddingdata from '../../../../search/computer/biddingdata/index.vue';
import Opedata from '../../../../search/computer/opedata/index.vue';

import { useRadio1Store } from '@/pain/search/search.js';
const signalsRadio1 = useRadio1Store()
let activeKey = ref("1");

let activeLiss = [
    {
        id: "1",
        name: "全部标讯",
    },
    {
        id: "2",
        name: "供应商",
    },
    {
        id: "3",
        name: "采购商",
    },
    {
        id: "4",
        name: "品牌",
    },
    {
        id: "5",
        name: "招标预测",
    },
    {
        id: "6",
        name: "拟建项目",
    },
    {
        id: "7",
        name: "招标代理机构",
    },
    {
        id: "8",
        name: "公司",
    },
];

const activeClick = (id) => {
    activeKey.value = id.id;
    signalsRadio1.id = id.id;
    console.log(activeKey.value);
};

let gjz = ref('')
let gjzIndex = ref('')

let ghz = [
    {
        id: '1',
        name: '大数据'
    }
]
const gjzClick = (item) => {
    gjz.value = item.id
    gjzIndex.value = item.id
    // signalsRadio1.title.title = item.name
}
</script>

<style lang="scss" scoped>
.actibes {
    background-color: #6675FF;
    color: #fff !important;
}

.subscribe {
    height: 940px;
    padding: 20px;
    background-color: #fff;
}

.el-tag {
    padding: 15px;
}

.search_box_top {
    .Beta {
        width: 30px;
        height: 14px;
        background: #fb4204;
        padding: 2px;
        border-radius: 3px;
        color: #f6f6f6;
    }
}



.subsk_top {
    display: flex;
    align-items: center;
    height: 56px;
    border-bottom: 1px solid #DBDFFF;

    .subsk_wds {
        padding: 7px 10px;
        margin-left: 15px;
        border: 1px solid #6675FF;
        border-radius: 4px;
        font-size: 14px;
        color: #304156;
    }
}

::v-deep .el-button--small {
    padding: 15px;
}
</style>